import React, { Component, Fragment } from 'react';
import { Card, Spin, Alert } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

import './ui.less';

class Loading extends Component {
	render(){
		const icon = <LoadingOutlined style={{fontSize: 24}} />
		return(
			<Fragment>
				<Card title="spin用法" className="card-wrap">
					<Spin />
					<Spin size="large" style={{margin: '0 20px'}} />
					<Spin indicator={icon} />
				</Card>
				<Card title="内容遮罩" className="card-wrap">
					<Alert 
						message="react"
						description="hello world"
						type="success"
					/>
					<Spin>
						<Alert 
							message="react"
							description="hello world"
							type="info"
						/>
					</Spin>
					<Spin tip="加载中..." indicator={icon}>
						<Alert 
							message="react"
							description="hello world"
							type="info"
						/>
					</Spin>
				</Card>
			</Fragment>
		)
	}
}

export default Loading;